<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="drawing_api">
        <title>PDF Drawing Backend | Kendo UI Drawing API</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to export a drawing in a PDF file when using the Kendo UI Drawing API.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("framework/drawing/pdf-output.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//framework/drawing/pdf-output.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="pdf-drawing-backend"><a href="#pdf-drawing-backend">PDF Drawing Backend</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/drawing/index">Kendo UI Drawing API</a> can export your drawing to a PDF file.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<p>Since PDF files cannot be displayed by a browser inside an HTML element, you cannot create a <code>Surface</code> object for this kind of output.</p>

<h3 id="employ-functions"><a href="#employ-functions">Employ Functions</a></h3>

<p>Use a few functions exported to <code>kendo.drawing.pdf</code> to generate the binary data instead.</p>

<h6>Example</h6>

<pre><code>var drawing = kendo.drawing;
var geo = kendo.geometry;

// this will contain all our drawing
var group = new drawing.Group();

// draw a circle
var circleGeometry = new geo.Circle([ 100, 100 ], 50);
var circle = new drawing.Circle(circleGeometry).stroke("red", 1);

// and add it to the group
group.append(circle);

// add some text
var text = new drawing.Text("Hello World", new geo.Point(100, 200));
group.append(text);

// (Optional) set PDF arguments, see the "PDF options" section below
group.options.set("pdf", {
    paperSize: "A4",
    margin: {
        left   : "20mm",
        top    : "40mm",
        right  : "20mm",
        bottom : "40mm"
    }
});

// you can offer the file for download now
drawing.pdf.saveAs(group, "filename.pdf", proxyUrl, callback);
</code></pre>

<p>The <code>proxyUrl</code> and <code>callback</code> arguments are optional. The <code>proxyUrl</code> is necessary for the download to work with Internet Explorer 9 and Safari and is not going to be used for other browsers. The <code>callback</code> will be invoked when the file has been successfully generated (generation could be asynchronous).</p>

<p>For more information on the <code>proxyURL</code>, refer to <a href="/api/javascript/kendo.html#methods-saveAs"><code>kendo.saveAs</code></a>.</p>

<h3 id="use-blob-object"><a href="#use-blob-object">Use Blob Object</a></h3>

<p>The example below demonstrates how to get the PDF as a <code>Blob</code> object in browsers that support it, such as all but Internet Explorer 9 or older.</p>

<h6>Example</h6>

<pre><code>drawing.pdf.toBlob(group, function(blob){
    // you can now upload it to a server
    // this form simulates an &lt;input type="file" name="pdfFile" /&gt;
    var form = new FormData();
    form.append("pdfFile", blob);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/posturl", true);
    xhr.send(form);
});

// or, you can get it as a data URL
drawing.pdf.toDataURL(group, function(dataURL){ ... });
</code></pre>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-PDF"><a href="#configuration-PDF">PDF Options</a></h3>

<p>The following options are currently supported:</p>

<ul>
<li>
<code>paperSize</code>—This option can be either a paper name, such as A4, an array of two numbers, such as paper width and height, or <code>"auto"</code>. By default, it is <code>"auto"</code>, which means the paper size will be just enough to fit the drawing. If numbers are specified, they are assumed to be in a typographic points unit. A point is 1/72 of an inch. Strings of the form <code>297mm</code>" can also be used. The supported units are <code>mm</code>, <code>cm</code>, <code>in</code> and <code>pt</code>. The available paper sizes are: <code>A0-A10</code>, <code>B0-B10</code>, <code>C0-C10</code>, <code>Executive</code>, <code>Folio</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>.</li>
<li>
<code>margin</code>—This option indicates the paper margins. It must be an object containing <code>top</code>, <code>left</code>, <code>right</code>, and <code>bottom</code> numbers which specify the paper margins. Again, if numbers are passed, they are assumed to be in points. By using strings you can specify units. When <code>paperSize</code> is <code>"auto"</code>, the dimensions are adjusted to include the margin.</li>
<li>
<code>landscape</code> (Boolean, default <code>false</code>)—If <code>true</code> is specified, the paper dimensions will be rotated if needed, so that the width is the larger edge.</li>
<li>
<code>title</code>, <code>author</code>, <code>subject</code>, <code>keywords</code>, <code>creator</code>—These are the optional strings to be included in the PDF information dictionary.</li>
<li>
<code>date</code>—This <code>Date</code> object is optional and specifies the creation date of the document. The default value is the current date/time (<code>new Date()</code>).</li>
<li>
<code>multiPage</code> (Boolean, default <code>false</code>)—Pass <code>true</code> to enable support for multiple page output, which is explained in the next section.</li>
</ul>

<h3 id="configuration-Multi-Page"><a href="#configuration-Multi-Page">Multi-Page PDF Output</a></h3>

<p>To render a multiple pages PDF file, pass <code>multiPage: true</code> to the <code>Group</code> object, which you pass to <code>drawing.pdf.toDataURL</code> (master group). This group is then expected to contain in turn only <code>Group</code> shapes, one for each page (page groups). The PDF options that you pass to the master group apply to each page group, unless the page group overrides them. The following options can be overridden:</p>

<ul>
<li><code>paperSize</code></li>
<li><code>margin</code></li>
<li><code>landscape</code></li>
</ul>

<p>Note that if <code>paperSize</code> on the master group is <code>"auto"</code> and the page groups do not override it, then the paper size for each individual page is determined by its corresponding group. This means the final document could have pages of different sizes.</p>

<h3 id="configuration-Custom"><a href="#configuration-Custom">Custom Fonts</a></h3>

<p>The Kendo UI Drawing API allows you to specify fonts with the <code>font</code> option of <code>Text</code> elements, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre><code>var text = new drawing.Text("Hello World", new geo.Point(100, 100));
text.options.set("font", "30px Verdana");
</code></pre>

<p>In order for this configuration to render the content correctly as PDF, your code must have access to the TTF files. Ideally, they must be the same fonts that the browser uses to render on screen. However, you cannot access the fonts from the client-side JavaScript on the machine where the browser runs, so they must be provided on the server and the paths to them must be declared. As of the Kendo UI 2014 Q3 SP1 release, the Kendo UI PDF generator is able to dig the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">CSS <code>@font-face</code> declarations</a> directly from the stylesheets. You no longer need to call the <a href="/api/javascript/pdf#methods-defineFont"><code>pdf.defineFont()</code></a> method manually.</p>

<p>For more information on how to embed fonts only using CSS at-rules, refer to the section on <a href="/framework/drawing/drawing-dom#configuration-Custom">drawing custom fonts in PDF</a>.</p>

<p>To manually define fonts, see the example below:</p>

<h6>Example</h6>

<pre><code>kendo.pdf.defineFont({
    "Verdana"             : "/fonts/Verdana.ttf", // this is a URL
    "Verdana|Bold"        : "/fonts/Verdana_Bold.ttf",
    "Verdana|Bold|Italic" : "/fonts/Verdana_Bold_Italic.ttf",
    "Verdana|Italic"      : "/fonts/Verdana_Italic.ttf"
});
</code></pre>

<p>This code must run before a PDF is requested. You can simply include it into a <code>&lt;script&gt;</code> tag in your page. The object passed to <code>kendo.pdf.defineFont</code> must map between font name/style to an URL with the <code>TrueType</code> file. The same origin policy applies, so you cannot specify URLs to different hosts.</p>

<p>Fonts are loaded on-demand, so you can declare more fonts than might be needed without worrying that any data will be needlessly downloaded or parsed. On the other hand, they will be cached, so if you are building a Single-Page Application (SPA), the overhead will occur only once.</p>

<p>Currently, only TTF fonts having an Unicode mapping are supported. If you do not declare any fonts, the Kendo UI PDF generator will fallback to the standard PDF fonts, listed below.</p>

<pre><code>"serif"                  : "Times-Roman",
"serif|bold"             : "Times-Bold",
"serif|italic"           : "Times-Italic",
"serif|bold|italic"      : "Times-BoldItalic",
"sans-serif"             : "Helvetica",
"sans-serif|bold"        : "Helvetica-Bold",
"sans-serif|italic"      : "Helvetica-Oblique",
"sans-serif|bold|italic" : "Helvetica-BoldOblique",
"monospace"              : "Courier",
"monospace|bold"         : "Courier-Bold",
"monospace|italic"       : "Courier-Oblique",
"monospace|bold|italic"  : "Courier-BoldOblique"
</code></pre>

<p>The right-side font names above are reserved and cannot be used as URLs to TrueType fonts with <code>kendo.pdf.defineFont</code>. Note that non-ASCII characters are unsupported with the standard PDF fonts.</p>

<h3 id="configuration-Unicode"><a href="#configuration-Unicode">Unicode Characters</a></h3>

<p>Unicode is supported only if the fonts you provide contain glyphs for the referenced characters. Otherwise, a default glyph will be displayed, which depends on the font, but is usually a blank rectangle. Currently, Kendo UI does not support font substitution, so if the text contains glyphs that are not available in the current font, but are perhaps available in another font that was declared, the default glyph will still be used.</p>

<h3 id="configuration-Compression"><a href="#configuration-Compression">Compression</a></h3>

<p>The PDF generator supports compression via the JavaScript <a href="https://github.com/nodeca/pako">Pako library</a>. Just load Pako with a <code>&lt;script&gt;</code> tag (<code>window.pako</code> should be available) and compression will be automatically enabled.</p>

<p>Compression can make a big difference in the output file size when you are using custom TTF fonts or images with alpha channel, such as PNGs with transparency.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>Besides drastically reducing the output size, Pako enables the browser to use less memory while rendering the PDF. Chrome is known to crash on generating very large PDF files and simply including this library will mitigate the problem. It is bundled with Kendo UI as <code>pako_deflate.min.js</code>.</p>
</blockquote>

<h2 id="supported-browsers"><a href="#supported-browsers">Supported Browsers</a></h2>

<p>For more information on the provided <a href="/intro/supporting/browser-support">browser support</a>, refer to the section on <a href="/intro/supporting/browser-support#pdf-export">PDF export</a>.</p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on Kendo UI Drawing API:</p>

<ul>
<li><a href="/framework/drawing/overview">Overview of the Drawing API</a></li>
<li><a href="/framework/drawing/basic-shapes">Drawing of Basic Shapes</a></li>
<li><a href="/framework/drawing/drawing-dom">Drawing of HTML Elements</a></li>
<li><a href="/framework/drawing/drawing-dom">Supported Browsers for Kendo UI Drawing API</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

